<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>机房监控大屏展示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <style>
    body {
      background: #101a2b;
      margin: 0;
      padding: 0;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      color: #e4f1fe;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
    }
    
    .screen-header {
      width: 100vw;
      max-width: 100vw;
      height: 90px;
      background: linear-gradient(90deg, rgba(64,158,255,0.18) 0%, rgba(56,189,248,0.12) 100%);
      box-shadow: 0 4px 32px 0 rgba(64,158,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      margin-bottom: 2vh;
    }
    
    .screen-header-title {
      font-size: 2.8vw;
      color: #38bdf8;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-shadow: 0 0 24px #38bdf8cc, 0 2px 0 #0f1a40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 2vw;
      user-select: none;
    }
    
    .screen-header-title .fa {
      font-size: 2.2vw;
      margin-right: 1vw;
      color: #FFD700;
      filter: drop-shadow(0 0 8px #FFD70088);
    }
    
    .back-btn {
      position: absolute;
      right: 40px;
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 500;
      padding: 8px 24px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .back-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    .carousel-container {
      width: 1400px;
      max-width: 95vw;
      height: 80vh;
      min-height: 600px;
      background: rgba(20, 30, 60, 0.92);
      border-radius: 24px;
      box-shadow: 0 0 48px 0 rgba(0,191,255,0.15), 0 0 0 3px rgba(64,158,255,0.15) inset;
      border: 2px solid rgba(64,158,255,0.25);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 24px 20px 20px 20px; /* 减少内边距 */
      backdrop-filter: blur(8px);
    }
    
    .carousel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px; /* 减少底部间距 */
    }
    
    .carousel-title {
      font-size: 22px;
      font-weight: 600;
      color: #38bdf8;
      letter-spacing: 2px;
      text-shadow: 0 0 10px #38bdf844;
      user-select: none;
      display: flex;
      align-items: center;
    }
    
    .carousel-title .fa {
      margin-right: 12px;
      color: #FFD700;
      filter: drop-shadow(0 0 8px #FFD70088);
    }
    
    .carousel-progress {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px; /* 减少顶部间距 */
      margin-bottom: 12px; /* 添加底部间距 */
      font-size: 14px;
      color: #94a3b8;
    }
    
    .progress-bar {
      flex: 1;
      height: 4px;
      background: rgba(64, 158, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      border-radius: 2px;
      transition: width 0.3s ease;
    }
    
    .filter-btn {
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 20px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .filter-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    .restore-btn {
      background: linear-gradient(90deg, #10b981 0%, #059669 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 20px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(16,185,129,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 12px;
    }
    
    .restore-btn:hover {
      background: linear-gradient(90deg, #059669 0%, #10b981 100%);
      box-shadow: 0 0 16px 2px #10b981cc;
    }
    
    .restore-btn.hidden {
      display: none;
    }
    
    .carousel-content {
      flex: 1;
      display: flex;
      position: relative;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1.5px solid rgba(64,158,255,0.10);
      overflow: hidden;
    }
    
    .room-types-sidebar {
      width: 200px;
      background: rgba(20, 30, 60, 0.8);
      border-right: 1px solid rgba(64,158,255,0.2);
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .room-type-item {
      padding: 12px 20px;
      color: #94a3b8;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;
      position: relative;
    }
    
    .room-type-item:hover {
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.1);
    }
    
    .room-type-item.active {
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.15);
      border-left-color: #38bdf8;
    }
    
    .room-type-item.active::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 8px solid #38bdf8;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }
    
    .room-type-count {
      margin-left: 8px;
      background: rgba(56, 189, 248, 0.2);
      color: #38bdf8;
      padding: 2px 6px;
      border-radius: 8px;
      font-size: 12px;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }
    
    .room-display-area {
      flex: 1;
      position: relative;
      overflow: auto; /* 改为auto，允许手动滚动 */
    }
    
    .room-rows-container {
      position: relative; /* 改为relative，不再使用绝对定位 */
      width: 100%;
      height: 100%;
      padding: 20px; /* 增加内边距，确保卡片有足够空间 */
      box-sizing: border-box;
    }
    
    .room-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* 减少间距 */
    }
    
    .room-card {
      width: calc(100% - 40px); /* 减去左右边距，确保不超出容器 */
      max-width: 100%;
      background: linear-gradient(135deg, rgba(64,158,255,0.15) 0%, rgba(56,189,248,0.10) 100%);
      border: 2px solid rgba(64,158,255,0.25);
      border-radius: 16px;
      padding: 16px; /* 减少内边距 */
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(64,158,255,0.1);
      cursor: pointer;
      animation: card-unfold 0.7s cubic-bezier(.4,1.6,.4,1);
      margin: 0 auto; /* 居中显示 */
      box-sizing: border-box; /* 确保padding和border包含在宽度内 */
    }
    
    .room-card:hover {
      transform: translateY(-4px) scale(1.01);
      border-color: rgba(64,158,255,0.5);
      box-shadow: 0 20px 60px rgba(64,158,255,0.25), 0 0 0 1px rgba(64,158,255,0.3) inset;
      background: linear-gradient(135deg, rgba(64,158,255,0.25) 0%, rgba(56,189,248,0.18) 100%);
    }
    
    .room-card.paused {
      border-color: rgba(255, 193, 7, 0.5);
      box-shadow: 0 8px 32px rgba(255, 193, 7, 0.2);
      background: linear-gradient(135deg, rgba(255,193,7,0.15) 0%, rgba(255,193,7,0.10) 100%);
    }
    
    .room-card.paused::after {
      content: '⏸️ 已暂停';
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255, 193, 7, 0.9);
      color: #000;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: bold;
      z-index: 10;
    }
    
    @keyframes card-unfold {
      0% {
        opacity: 0;
        transform: scaleY(0.2) scaleX(0.95);
        filter: blur(8px);
      }
      40% {
        opacity: 1;
        filter: blur(2px);
        box-shadow: 0 0 32px 0 #38bdf8cc;
      }
      100% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
        filter: blur(0);
      }
    }
    
    .room-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.6s;
    }
    
    .room-card:hover::before {
      left: 100%;
    }
    
    .room-card.urgent {
      border-color: rgba(239, 68, 68, 0.5);
      background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.10) 100%);
      box-shadow: 0 8px 32px rgba(239,68,68,0.2);
    }
    
    .room-card.urgent:hover {
      border-color: rgba(239, 68, 68, 0.8);
      box-shadow: 0 20px 60px rgba(239,68,68,0.3), 0 0 0 1px rgba(239,68,68,0.4) inset;
      background: linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(239,68,68,0.18) 100%);
    }
    
    .room-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px; /* 减少底部间距 */
      width: 100%; /* 确保宽度不超过父容器 */
      min-width: 0; /* 允许内容收缩 */
    }
    
    .room-icon {
      font-size: 16px; /* 进一步减小图标 */
      color: #38bdf8;
      margin-right: 6px; /* 进一步减少右边距 */
      filter: drop-shadow(0 0 8px #38bdf8cc);
      flex-shrink: 0; /* 防止图标被压缩 */
    }
    
    .room-card.urgent .room-icon {
      color: #ef4444;
      filter: drop-shadow(0 0 8px #ef4444cc);
    }
    
    .room-title {
      font-size: 14px; /* 进一步减小字体 */
      font-weight: 600;
      color: #e4f1fe;
      flex: 1;
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 防止溢出 */
      text-overflow: ellipsis; /* 超出显示省略号 */
      min-width: 0; /* 允许内容收缩 */
    }
    
    .room-type-tag {
      background: rgba(56, 189, 248, 0.2);
      color: #38bdf8;
      padding: 2px 4px; /* 进一步减少内边距 */
      border-radius: 4px;
      font-size: 9px; /* 进一步减小字体 */
      border: 1px solid rgba(56, 189, 248, 0.3);
      flex-shrink: 0; /* 防止标签被压缩 */
      white-space: nowrap; /* 防止换行 */
    }
    
    .room-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px; /* 进一步减少间距 */
      margin-bottom: 10px; /* 减少底部间距 */
      width: 100%; /* 确保宽度不超过父容器 */
    }
    
    .room-info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px; /* 增加内边距，让两列布局更美观 */
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      border: 1px solid rgba(64, 158, 255, 0.1);
      min-width: 0; /* 允许内容收缩 */
      overflow: hidden; /* 防止内容溢出 */
    }
    
    .room-info-label {
      font-size: 11px; /* 稍微增加字体大小 */
      color: #94a3b8;
      white-space: nowrap; /* 防止换行 */
      margin-right: 4px; /* 添加右边距 */
    }
    
    .room-info-value {
      font-size: 12px; /* 稍微增加字体大小 */
      font-weight: 600;
      color: #e4f1fe;
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 防止溢出 */
      text-overflow: ellipsis; /* 超出显示省略号 */
    }
    
    .room-stats {
      display: flex;
      gap: 6px; /* 进一步减少间距 */
      width: 100%; /* 确保宽度不超过父容器 */
    }
    
    .stat-item {
      flex: 1;
      text-align: center;
      padding: 5px; /* 进一步减少内边距 */
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      border: 1px solid rgba(64, 158, 255, 0.1);
      min-width: 0; /* 允许内容收缩 */
      overflow: hidden; /* 防止内容溢出 */
    }
    
    .stat-label {
      font-size: 8px; /* 进一步减小字体 */
      color: #94a3b8;
      margin-bottom: 2px;
      white-space: nowrap; /* 防止换行 */
    }
    
    .stat-value {
      font-size: 13px; /* 稍微调整字体大小 */
      font-weight: bold;
      color: #38bdf8;
      white-space: nowrap; /* 防止换行 */
    }
    
    .stat-value.warning {
      color: #f59e0b;
    }
    
    .stat-value.alert {
      color: #ef4444;
    }
    
    .stat-value.normal {
      color: #10b981;
    }
    
    /* 告警弹窗样式 */
    .alarm-modal {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(15,26,64,0.45);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      animation: modal-fadein 0.3s;
    }
    
    @keyframes modal-fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    .alarm-modal-content {
      background: rgba(20,30,60,0.98);
      border-radius: 16px;
      box-shadow: 0 0 32px 0 #38bdf8cc;
      padding: 32px;
      min-width: 800px;
      max-width: 90vw;
      max-height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    .alarm-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(64,158,255,0.2);
    }
    
    .alarm-modal-title {
      font-size: 20px;
      color: #38bdf8;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .alarm-modal-close {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .alarm-modal-close:hover {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1);
    }
    
    .alarm-modal-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .alarm-batch-btn {
      background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(245,158,11,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .alarm-batch-btn:hover {
      background: linear-gradient(90deg, #f97316 0%, #f59e0b 100%);
      box-shadow: 0 0 16px 2px #f59e0bcc;
    }
    
    .alarm-pagination {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .alarm-pagination-btn {
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .alarm-pagination-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    .alarm-pagination-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .alarm-pagination-info {
      color: #94a3b8;
      font-size: 14px;
    }
    
    .alarm-list {
      flex: 1;
      overflow-y: auto;
      padding-right: 8px;
    }
    
    .alarm-list::-webkit-scrollbar {
      width: 6px;
      background: transparent;
    }
    
    .alarm-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #38bdf8 0%, #409EFF 100%);
      border-radius: 6px;
      box-shadow: 0 0 8px #38bdf8cc;
    }
    
    .alarm-list::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .alarm-item {
      background: rgba(255,255,255,0.04);
      border-radius: 12px;
      margin-bottom: 16px;
      padding: 20px;
      border: 1px solid rgba(64,158,255,0.1);
      transition: all 0.3s ease;
      animation: card-unfold 0.7s cubic-bezier(.4,1.6,.4,1);
    }
    
    .alarm-item:hover {
      background: rgba(64,158,255,0.1);
      border-color: rgba(64,158,255,0.3);
      box-shadow: 0 0 20px rgba(64,158,255,0.2);
    }
    
    .alarm-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .alarm-id {
      font-family: 'Consolas', 'monospace';
      font-size: 16px;
      color: #b6c7e3;
      background: rgba(64,158,255,0.08);
      border-radius: 4px;
      padding: 4px 12px;
    }
    
    .alarm-time {
      font-size: 14px;
      color: #94a3b8;
    }
    
    .alarm-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .alarm-info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
    }
    
    .alarm-info-label {
      font-size: 14px;
      color: #94a3b8;
    }
    
    .alarm-info-value {
      font-size: 14px;
      color: #e4f1fe;
      font-weight: 500;
    }
    
    .alarm-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    
    .alarm-action-btn {
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .alarm-action-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    /* 功能提示弹窗 */
    .feature-modal {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(15,26,64,0.45);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      animation: modal-fadein 0.3s;
    }
    
    .feature-modal-content {
      background: rgba(20,30,60,0.98);
      border-radius: 16px;
      box-shadow: 0 0 32px 0 #38bdf8cc;
      padding: 32px;
      min-width: 400px;
      max-width: 90vw;
      text-align: center;
    }
    
    .feature-modal-title {
      font-size: 20px;
      color: #38bdf8;
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .feature-modal-desc {
      font-size: 16px;
      color: #e4f1fe;
      margin-bottom: 24px;
      line-height: 1.6;
    }
    
    .feature-modal-btn {
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 500;
      padding: 10px 24px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
    }
    
    .feature-modal-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    /* 筛选弹窗样式 */
    .filter-modal {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(15,26,64,0.45);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      animation: modal-fadein 0.3s;
    }
    
    .filter-modal-content {
      background: rgba(20,30,60,0.98);
      border-radius: 16px;
      box-shadow: 0 0 32px 0 #38bdf8cc;
      padding: 32px;
      min-width: 400px;
      max-width: 90vw;
      max-height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    .filter-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(64,158,255,0.2);
    }
    
    .filter-modal-title {
      font-size: 20px;
      color: #38bdf8;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .filter-modal-close {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .filter-modal-close:hover {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1);
    }
    
    .filter-options {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(64,158,255,0.2);
    }
    
    .filter-option {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .filter-label {
      font-size: 14px;
      color: #94a3b8;
      min-width: 100px;
    }
    
    .filter-radio-group {
      display: flex;
      gap: 20px;
    }
    
    .filter-radio {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    
    .filter-radio input[type="radio"] {
      margin-right: 8px;
      transform: scale(0.8);
    }
    
    .filter-select {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(64, 158, 255, 0.1);
      border-radius: 8px;
      padding: 8px 12px;
      color: #e4f1fe;
      font-size: 14px;
      cursor: pointer;
      outline: none;
    }
    
    .filter-select:focus {
      border-color: #409EFF;
      box-shadow: 0 0 8px #409EFF88;
    }
    
    .filter-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
    
    .filter-action-btn {
      background: linear-gradient(90deg, #38bdf8 0%, #409EFF 100%);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 16px;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      outline: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .filter-action-btn:hover {
      background: linear-gradient(90deg, #409EFF 0%, #38bdf8 100%);
      box-shadow: 0 0 16px 2px #38bdf8cc;
    }
    
    .filter-action-btn.secondary {
      background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%);
      color: #fff;
    }
    
    .filter-action-btn.secondary:hover {
      background: linear-gradient(90deg, #4b5563 0%, #6b7280 100%);
      box-shadow: 0 0 16px 2px #6b7280cc;
    }
    
    @media (max-width: 900px) {
      .carousel-container {
        width: 98vw;
        padding: 20px 16px 16px 16px;
      }
      .carousel-content {
        flex-direction: column;
      }
      .carousel-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
      .carousel-header > div {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }
      .filter-btn, .restore-btn {
        width: 100%;
        justify-content: center;
      }
      .restore-btn {
        margin-left: 0;
        margin-top: 8px;
      }
      .carousel-progress {
        margin-top: 12px;
        font-size: 12px;
      }
      .room-types-sidebar {
        width: 100%;
        height: auto;
        max-height: 120px;
        overflow-y: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 10px;
      }
      .room-type-item {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
      }
      .room-display-area {
        height: calc(100% - 140px);
      }
      .room-rows-container {
        padding: 16px; /* 调整内边距 */
      }
      .room-card {
        width: calc(100% - 32px); /* 调整宽度 */
        padding: 14px; /* 减少内边距 */
      }
      .room-list {
        gap: 10px; /* 进一步减少间距 */
      }
      .room-info {
        grid-template-columns: 1fr 1fr;
        gap: 6px; /* 减少间距 */
      }
      .alarm-modal-content {
        min-width: 95vw;
        padding: 20px;
      }
      .alarm-content {
        grid-template-columns: 1fr;
      }
      .filter-modal-content {
        min-width: 95vw;
        padding: 20px;
      }
    }
    
    @media (max-width: 600px) {
      .screen-header {
        height: 60px;
      }
      .screen-header-title {
        font-size: 18px;
        padding: 0 8px;
      }
      .back-btn {
        right: 20px;
        font-size: 14px;
        padding: 6px 16px;
      }
      .carousel-container {
        width: 99vw;
        height: 85vh;
        padding: 16px 12px 12px 12px;
      }
      .carousel-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }
      .carousel-header > div {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }
      .filter-btn, .restore-btn {
        width: 100%;
        justify-content: center;
      }
      .restore-btn {
        margin-left: 0;
        margin-top: 8px;
      }
      .carousel-title {
        font-size: 18px;
      }
      .carousel-progress {
        margin-top: 8px;
        font-size: 11px;
      }
      .room-types-sidebar {
        max-height: 80px;
        padding: 8px;
      }
      .room-type-item {
        padding: 6px 8px;
        font-size: 11px;
      }
      .room-display-area {
        height: calc(100% - 100px);
      }
      .room-rows-container {
        padding: 12px; /* 调整内边距 */
      }
      .room-card {
        width: calc(100% - 24px); /* 调整宽度 */
        padding: 12px; /* 减少内边距 */
      }
      .room-list {
        gap: 8px; /* 进一步减少间距 */
      }
      .room-info {
        grid-template-columns: 1fr;
        gap: 4px; /* 减少间距 */
      }
      .room-stats {
        flex-direction: column;
        gap: 6px; /* 减少间距 */
      }
      .filter-modal-content {
        min-width: 98vw;
        padding: 16px;
      }
      .filter-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .filter-radio-group {
        flex-direction: column;
        gap: 8px;
      }
    }
  </style>
</head>
<body>
  <div class="screen-header">
    <div class="screen-header-title">
      <i class="fa-solid fa-server"></i>
      智能园区大屏 - 机房监控展示
    </div>
    <button class="back-btn" onclick="goBack()">
      <i class="fa-solid fa-arrow-left"></i>
      返回后台
    </button>
  </div>
  
  <div class="carousel-container">
    <div class="carousel-header">
      <div class="carousel-title">
        <i class="fa-solid fa-building"></i>
        机房信息统计展示 - 全部机房 (0个机房)
      </div>
      <div style="display: flex; align-items: center;">
        <button class="filter-btn" onclick="toggleFilter()">
          <i class="fa-solid fa-filter"></i>
          筛选
        </button>
        <button class="restore-btn hidden" id="restoreBtn" onclick="restoreCarousel()">
          <i class="fa-solid fa-rotate-left"></i>
          恢复轮播
        </button>
      </div>
    </div>
    
    <div class="carousel-progress">
      <span class="progress-text">进度: 1 / 7</span>
      <div class="progress-bar">
        <div class="progress-fill" style="width: 14.3%"></div>
      </div>
    </div>
    
    <div class="carousel-content">
      <div class="room-types-sidebar" id="roomTypesSidebar">
        <!-- 动态渲染机房类型 -->
      </div>
      <div class="room-display-area">
        <div class="room-rows-container" id="roomRowsContainer">
          <!-- 动态渲染机房行 -->
        </div>
      </div>
    </div>
  </div>
  
  <!-- 告警弹窗 -->
  <div class="alarm-modal" id="alarmModal">
    <div class="alarm-modal-content">
      <div class="alarm-modal-header">
        <div class="alarm-modal-title">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <span id="alarmModalTitle">机房告警详情</span>
        </div>
        <div class="alarm-modal-actions">
          <button class="alarm-batch-btn" id="batchProcessBtn" onclick="handleBatchProcess()" style="display: none;">
            <i class="fa-solid fa-tasks"></i>
            批量处理
          </button>
          <button class="alarm-modal-close" onclick="closeAlarmModal()">
            <i class="fa-solid fa-times"></i>
          </button>
        </div>
      </div>
      
      <div class="alarm-pagination">
        <button class="alarm-pagination-btn" id="prevPageBtn" onclick="prevPage()">
          <i class="fa-solid fa-chevron-left"></i>
          上一页
        </button>
        <div class="alarm-pagination-info" id="pageInfo">第 1 页，共 1 页</div>
        <button class="alarm-pagination-btn" id="nextPageBtn" onclick="nextPage()">
          下一页
          <i class="fa-solid fa-chevron-right"></i>
        </button>
      </div>
      
      <div class="alarm-list" id="alarmList">
        <!-- 动态渲染告警列表 -->
      </div>
    </div>
  </div>
  
  <!-- 功能提示弹窗 -->
  <div class="feature-modal" id="featureModal">
    <div class="feature-modal-content">
      <div class="feature-modal-title">
        <i class="fa-solid fa-info-circle"></i>
        功能提示
      </div>
      <div class="feature-modal-desc" id="featureModalDesc">
        双击机房卡片可进入对应机房的"设备详情监控"页面，查看详细的设备运行状态和监控数据。
      </div>
      <button class="feature-modal-btn" onclick="closeFeatureModal()">
        我知道了
      </button>
    </div>
  </div>
  
  <!-- 筛选弹窗 -->
  <div class="filter-modal" id="filterModal">
    <div class="filter-modal-content">
      <div class="filter-modal-header">
        <div class="filter-modal-title">
          <i class="fa-solid fa-filter"></i>
          筛选条件
        </div>
        <button class="filter-modal-close" onclick="closeFilterModal()">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <div class="filter-options">
        <div class="filter-option">
          <label class="filter-label">筛选类型：</label>
          <div class="filter-radio-group">
            <label class="filter-radio">
              <input type="radio" name="filterType" value="roomType" checked>
              <span class="radio-text">机房大类</span>
            </label>
            <label class="filter-radio">
              <input type="radio" name="filterType" value="roomName">
              <span class="radio-text">机房名称</span>
            </label>
          </div>
        </div>
        
        <div class="filter-option">
          <label class="filter-label">筛选条件：</label>
          <select class="filter-select" id="filterSelect">
            <option value="">全部</option>
          </select>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="filter-action-btn" onclick="applyFilter()">
          <i class="fa-solid fa-check"></i>
          应用筛选
        </button>
        <button class="filter-action-btn secondary" onclick="clearFilter()">
          <i class="fa-solid fa-times"></i>
          清除筛选
        </button>
      </div>
    </div>
  </div>
  
  <script>
    // 全局变量
    let currentIndex = 0;
    let isPaused = false;
    let carouselInterval = null;
    let roomGroups = [];
    let currentAlarms = [];
    let currentPage = 0;
    let alarmsPerPage = 5;
    let currentFilter = { type: '', value: '' };
    let filteredRooms = [];
    let currentRoomTypeIndex = 0;
    let currentRoomIndex = 0;
    let typeSwitchDelay = 5000; // 类型切换延迟（毫秒）
    
    // 机房类型定义
    const roomTypes = ['生活供水机房', '发电机房', '高压配电机房', '低压配电机房', '变压器机房', '集水井区域', '直行电梯'];
    
    // 模拟机房数据
    let allRooms = [
      { id: 1, name: 'A栋生活供水机房', type: '生活供水机房', deviceCount: 12, env: '温度24℃ 湿度60%', alerts: 2, unhandledAlerts: 1 },
      { id: 2, name: 'B栋发电机房', type: '发电机房', deviceCount: 8, env: '温度28℃ 湿度55%', alerts: 1, unhandledAlerts: 0 },
      { id: 3, name: 'C栋高压配电机房', type: '高压配电机房', deviceCount: 15, env: '温度26℃ 湿度58%', alerts: 3, unhandledAlerts: 2 },
      { id: 4, name: 'D栋低压配电机房', type: '低压配电机房', deviceCount: 10, env: '温度25℃ 湿度62%', alerts: 0, unhandledAlerts: 0 },
      { id: 5, name: 'E栋变压器机房', type: '变压器机房', deviceCount: 7, env: '温度27℃ 湿度59%', alerts: 1, unhandledAlerts: 0 },
      { id: 6, name: 'F栋集水井区域', type: '集水井区域', deviceCount: 5, env: '温度23℃ 湿度65%', alerts: 1, unhandledAlerts: 1 },
      { id: 7, name: 'G栋直行电梯', type: '直行电梯', deviceCount: 9, env: '温度25℃ 湿度60%', alerts: 0, unhandledAlerts: 0 },
      { id: 8, name: 'H栋生活供水机房', type: '生活供水机房', deviceCount: 14, env: '温度26℃ 湿度58%', alerts: 1, unhandledAlerts: 1 },
      { id: 9, name: 'I栋发电机房', type: '发电机房', deviceCount: 6, env: '温度29℃ 湿度52%', alerts: 2, unhandledAlerts: 0 }
    ];
    
    // 模拟告警数据
    const alarmTemplates = [
      { id: 'ALM001', time: '2025-02-28 14:35:22', status: '未处理', condition: '温度过高', value: '45℃', sensor: '温度传感器T001' },
      { id: 'ALM002', time: '2025-02-28 14:28:15', status: '未处理', condition: '湿度异常', value: '85%', sensor: '湿度传感器H002' },
      { id: 'ALM003', time: '2025-02-28 14:15:08', status: '未处理', condition: '电压波动', value: '380V±10%', sensor: '电压传感器V003' },
      { id: 'ALM004', time: '2025-02-28 13:52:41', status: '未处理', condition: '电流过载', value: '120A', sensor: '电流传感器C004' },
      { id: 'ALM005', time: '2025-02-28 13:40:12', status: '未处理', condition: '压力异常', value: '0.8MPa', sensor: '压力传感器P005' }
    ];
    
    // 初始化页面
    function initPage() {
      // 自动全屏
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      }
      
      updateRoomData();
      startCarousel();
      
      // 每10秒刷新数据
      setInterval(() => {
        updateRoomData();
      }, 10000);
    }
    
    // 更新机房数据
    function updateRoomData() {
      // 随机更新告警数据
      allRooms.forEach(room => {
        room.alerts = Math.floor(Math.random() * 4);
        room.unhandledAlerts = Math.floor(Math.random() * (room.alerts + 1));
      });
      
      // 应用筛选
      applyCurrentFilter();
      
      // 按类型分组并排序
      roomGroups = roomTypes.map(type => {
        const rooms = filteredRooms.filter(room => room.type === type);
        if (rooms.length === 0) return null;
        
        // 优先排序未处理告警
        return rooms.sort((a, b) => {
          if (a.unhandledAlerts > 0 && b.unhandledAlerts === 0) return -1;
          if (a.unhandledAlerts === 0 && b.unhandledAlerts > 0) return 1;
          if (a.unhandledAlerts !== b.unhandledAlerts) return b.unhandledAlerts - a.unhandledAlerts;
          return a.id - b.id;
        });
      }).filter(group => group !== null);
      
      renderRoomList();
    }
    
    // 应用当前筛选
    function applyCurrentFilter() {
      if (!currentFilter.type || !currentFilter.value) {
        filteredRooms = [...allRooms];
        return;
      }
      
      filteredRooms = allRooms.filter(room => {
        if (currentFilter.type === 'roomType') {
          return room.type === currentFilter.value;
        } else if (currentFilter.type === 'roomName') {
          return room.name.includes(currentFilter.value);
        }
        return true;
      });
    }
    
    // 更新轮播标题显示当前类型
    function updateCarouselTitle() {
      const carouselTitle = document.querySelector('.carousel-title');
      if (carouselTitle && roomGroups.length > 0 && currentRoomTypeIndex < roomGroups.length) {
        const currentType = roomTypes[currentRoomTypeIndex];
        const currentGroup = roomGroups[currentRoomTypeIndex];
        const roomCount = currentGroup ? currentGroup.length : 0;
        const pauseStatus = isPaused ? ' ⏸️ 已暂停' : '';
        carouselTitle.innerHTML = `
          <i class="fa-solid fa-building"></i>
          机房信息统计展示 - ${currentType} (${roomCount}个机房)${pauseStatus}
        `;
      }
    }
    
    // 渲染机房列表
    function renderRoomList() {
      const roomTypesSidebar = document.getElementById('roomTypesSidebar');
      const roomRowsContainer = document.getElementById('roomRowsContainer');
      
      roomTypesSidebar.innerHTML = '';
      roomRowsContainer.innerHTML = '';
      
      // 更新轮播标题显示当前类型
      updateCarouselTitle();
      
      // 更新进度指示器
      updateProgressIndicator();
      
      // 渲染左侧机房类型列表
      roomTypes.forEach((type, index) => {
        const typeRooms = filteredRooms.filter(room => room.type === type);
        const typeItem = document.createElement('div');
        typeItem.className = `room-type-item ${index === currentRoomTypeIndex ? 'active' : ''}`;
        typeItem.innerHTML = `
          ${type}
          <span class="room-type-count">${typeRooms.length}</span>
        `;
        roomTypesSidebar.appendChild(typeItem);
      });
      
      // 渲染当前类型的机房列表
      if (roomGroups.length > 0 && currentRoomTypeIndex < roomGroups.length) {
        const currentGroup = roomGroups[currentRoomTypeIndex];
        if (currentGroup && currentGroup.length > 0) {
          const roomList = document.createElement('div');
          roomList.className = 'room-list';
          
          currentGroup.forEach(room => {
            const card = createRoomCard(room);
            roomList.appendChild(card);
          });
          
          roomRowsContainer.appendChild(roomList);
          
          // 在整个机房显示区域添加鼠标悬停事件
          const roomDisplayArea = document.querySelector('.room-display-area');
          if (roomDisplayArea) {
            roomDisplayArea.addEventListener('mouseenter', () => {
              isPaused = true;
              updateCarouselTitle(); // 更新标题显示暂停状态
              console.log('鼠标进入机房显示区域，暂停切换');
            });
            
            roomDisplayArea.addEventListener('mouseleave', () => {
              isPaused = false;
              updateCarouselTitle(); // 更新标题显示恢复状态
              console.log('鼠标离开机房显示区域，恢复切换');
            });
          }
        }
      }
    }
    
    // 更新进度指示器
    function updateProgressIndicator() {
      const progressText = document.querySelector('.progress-text');
      const progressFill = document.querySelector('.progress-fill');
      
      if (progressText && progressFill) {
        const totalTypes = roomGroups.length;
        const currentProgress = currentRoomTypeIndex + 1;
        const progressPercentage = (currentProgress / totalTypes) * 100;
        
        progressText.textContent = `进度: ${currentProgress} / ${totalTypes}`;
        progressFill.style.width = `${progressPercentage}%`;
      }
    }
    
    // 创建机房卡片
    function createRoomCard(room) {
      const card = document.createElement('div');
      card.className = `room-card ${room.unhandledAlerts > 0 ? 'urgent' : ''}`;
      
      card.innerHTML = `
        <div class="room-header">
          <i class="fa-solid fa-building room-icon"></i>
          <div class="room-title">${room.name}</div>
          <div class="room-type-tag">${room.type}</div>
        </div>
        <div class="room-info">
          <div class="room-info-item">
            <span class="room-info-label">设备数量</span>
            <span class="room-info-value">${room.deviceCount}台</span>
          </div>
          <div class="room-info-item">
            <span class="room-info-label">环境信息</span>
            <span class="room-info-value">${room.env}</span>
          </div>
        </div>
        <div class="room-stats">
          <div class="stat-item">
            <div class="stat-label">告警总数</div>
            <div class="stat-value ${room.alerts > 0 ? 'warning' : 'normal'}">${room.alerts}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">未处理</div>
            <div class="stat-value ${room.unhandledAlerts > 0 ? 'alert' : 'normal'}">${room.unhandledAlerts}</div>
          </div>
        </div>
      `;
      
      // 点击未处理告警查看详情
      const unhandledStat = card.querySelector('.stat-value.alert');
      if (unhandledStat && room.unhandledAlerts > 0) {
        unhandledStat.style.cursor = 'pointer';
        unhandledStat.onclick = (e) => {
          e.stopPropagation();
          showAlarmModal(room);
        };
      }
      
      // 鼠标悬停暂停轮播
      card.addEventListener('mouseenter', () => {
        isPaused = true;
        card.classList.add('paused');
        updateCarouselTitle(); // 更新标题显示暂停状态
        console.log('鼠标悬停，暂停切换');
      });
      
      card.addEventListener('mouseleave', () => {
        isPaused = false;
        card.classList.remove('paused');
        updateCarouselTitle(); // 更新标题显示恢复状态
        console.log('鼠标离开，恢复切换');
      });
      
      // 双击进入设备详情
      card.addEventListener('dblclick', () => {
        showFeatureModal(room);
      });
      
      return card;
    }
    
    // 启动轮播
    function startCarousel() {
      if (carouselInterval) {
        clearInterval(carouselInterval);
      }
      
      carouselInterval = setInterval(() => {
        if (isPaused) return;
        
        // 直接切换到下一个类型，不进行滚动
        setTimeout(() => {
          switchToNextRoomType();
        }, typeSwitchDelay);
        
      }, typeSwitchDelay + 2000); // 总间隔 = 切换延迟 + 2秒
    }
    
    // 切换到下一个机房类型
    function switchToNextRoomType() {
      currentRoomTypeIndex = (currentRoomTypeIndex + 1) % roomGroups.length;
      currentRoomIndex = 0;
      
      // 重新渲染当前类型的机房列表
      renderRoomList();
      
      // 短暂延迟后继续轮播
      setTimeout(() => {
        if (!isPaused) {
          startCarousel();
        }
      }, 1000);
    }
    
    // 显示筛选弹窗
    function toggleFilter() {
      const filterModal = document.getElementById('filterModal');
      filterModal.style.display = 'flex';
      
      // 更新筛选选项
      updateFilterOptions();
    }
    
    // 关闭筛选弹窗
    function closeFilterModal() {
      document.getElementById('filterModal').style.display = 'none';
    }
    
    // 更新筛选选项
    function updateFilterOptions() {
      const filterSelect = document.getElementById('filterSelect');
      const filterType = document.querySelector('input[name="filterType"]:checked').value;
      
      filterSelect.innerHTML = '<option value="">全部</option>';
      
      if (filterType === 'roomType') {
        roomTypes.forEach(type => {
          const option = document.createElement('option');
          option.value = type;
          option.textContent = type;
          filterSelect.appendChild(option);
        });
      } else if (filterType === 'roomName') {
        const roomNames = [...new Set(allRooms.map(room => room.name))];
        roomNames.forEach(name => {
          const option = document.createElement('option');
          option.value = name;
          option.textContent = name;
          filterSelect.appendChild(option);
        });
      }
    }
    
    // 应用筛选
    function applyFilter() {
      const filterType = document.querySelector('input[name="filterType"]:checked').value;
      const filterValue = document.getElementById('filterSelect').value;
      
      currentFilter = { type: filterType, value: filterValue };
      closeFilterModal();
      
      // 暂停轮播并显示恢复按钮
      isPaused = true;
      const restoreBtn = document.getElementById('restoreBtn');
      if (restoreBtn) {
        restoreBtn.classList.remove('hidden');
      }
      
      updateRoomData();
    }
    
    // 清除筛选
    function clearFilter() {
      currentFilter = { type: '', value: '' };
      document.getElementById('filterSelect').value = '';
      closeFilterModal();
      
      // 恢复轮播并隐藏恢复按钮
      isPaused = false;
      const restoreBtn = document.getElementById('restoreBtn');
      if (restoreBtn) {
        restoreBtn.classList.add('hidden');
      }
      
      updateRoomData();
    }
    
    // 监听筛选类型变化
    document.addEventListener('change', function(e) {
      if (e.target.name === 'filterType') {
        updateFilterOptions();
      }
    });
    
    // 显示告警弹窗
    function showAlarmModal(room) {
      // 暂停轮播
      isPaused = true;
      
      // 生成该机房的告警数据
      currentAlarms = [];
      for (let i = 0; i < room.unhandledAlerts; i++) {
        const template = alarmTemplates[i % alarmTemplates.length];
        currentAlarms.push({
          ...template,
          id: `${template.id}-${room.id}-${i + 1}`,
          time: new Date(Date.now() - Math.random() * 3600000).toLocaleString()
        });
      }
      
      currentPage = 0;
      document.getElementById('alarmModalTitle').textContent = `${room.name} - 未处理告警`;
      document.getElementById('alarmModal').style.display = 'flex';
      
      // 控制批量处理按钮显示
      const batchProcessBtn = document.getElementById('batchProcessBtn');
      if (batchProcessBtn) {
        batchProcessBtn.style.display = currentAlarms.length > 1 ? 'flex' : 'none';
      }
      
      renderAlarmList();
    }
    
    // 关闭告警弹窗
    function closeAlarmModal() {
      document.getElementById('alarmModal').style.display = 'none';
      // 恢复轮播
      isPaused = false;
    }
    
    // 渲染告警列表
    function renderAlarmList() {
      const alarmList = document.getElementById('alarmList');
      const startIndex = currentPage * alarmsPerPage;
      const endIndex = startIndex + alarmsPerPage;
      const pageAlarms = currentAlarms.slice(startIndex, endIndex);
      
      alarmList.innerHTML = '';
      
      pageAlarms.forEach(alarm => {
        const alarmItem = document.createElement('div');
        alarmItem.className = 'alarm-item';
        
        alarmItem.innerHTML = `
          <div class="alarm-header">
            <div class="alarm-id">${alarm.id}</div>
            <div class="alarm-time">${alarm.time}</div>
          </div>
          <div class="alarm-content">
            <div class="alarm-info-item">
              <span class="alarm-info-label">处理情况</span>
              <span class="alarm-info-value">${alarm.status}</span>
            </div>
            <div class="alarm-info-item">
              <span class="alarm-info-label">告警条件</span>
              <span class="alarm-info-value">${alarm.condition}</span>
            </div>
            <div class="alarm-info-item">
              <span class="alarm-info-label">告警值</span>
              <span class="alarm-info-value">${alarm.value}</span>
            </div>
            <div class="alarm-info-item">
              <span class="alarm-info-label">传感器名称</span>
              <span class="alarm-info-value">${alarm.sensor}</span>
            </div>
          </div>
          <div class="alarm-actions">
            <button class="alarm-action-btn" onclick="handleProcess('${alarm.id}')">
              <i class="fa-solid fa-check"></i>处理
            </button>
          </div>
        `;
        
        alarmList.appendChild(alarmItem);
      });
      
      updatePagination();
    }
    
    // 更新分页信息
    function updatePagination() {
      const totalPages = Math.ceil(currentAlarms.length / alarmsPerPage);
      document.getElementById('pageInfo').textContent = `第 ${currentPage + 1} 页，共 ${totalPages} 页`;
      
      document.getElementById('prevPageBtn').disabled = currentPage === 0;
      document.getElementById('nextPageBtn').disabled = currentPage >= totalPages - 1;
    }
    
    // 上一页
    function prevPage() {
      if (currentPage > 0) {
        currentPage--;
        renderAlarmList();
      }
    }
    
    // 下一页
    function nextPage() {
      const totalPages = Math.ceil(currentAlarms.length / alarmsPerPage);
      if (currentPage < totalPages - 1) {
        currentPage++;
        renderAlarmList();
      }
    }
    
    // 处理单个告警
    function handleProcess(alarmId) {
      // 从当前告警列表中移除
      currentAlarms = currentAlarms.filter(alarm => alarm.id !== alarmId);
      
      // 更新对应机房的未处理告警数
      const roomId = alarmId.split('-')[1];
      const room = allRooms.find(r => r.id == roomId);
      if (room && room.unhandledAlerts > 0) {
        room.unhandledAlerts--;
      }
      
      // 更新批量处理按钮显示状态
      const batchProcessBtn = document.getElementById('batchProcessBtn');
      if (batchProcessBtn) {
        batchProcessBtn.style.display = currentAlarms.length > 1 ? 'flex' : 'none';
      }
      
      // 重新渲染
      renderAlarmList();
      updateRoomData();
      
      // 如果没有告警了，关闭弹窗并恢复轮播
      if (currentAlarms.length === 0) {
        closeAlarmModal();
      }
    }
    
    // 批量处理
    function handleBatchProcess() {
      alert('正在跳转到后台告警列表页面，系统将自动筛选对应机房的未处理告警，并提供复选框进行批量处理。');
      closeAlarmModal();
    }
    
    // 显示功能提示弹窗
    function showFeatureModal(room) {
      document.getElementById('featureModalDesc').textContent = 
        `双击机房卡片可进入"${room.name}"的设备详情监控页面，查看详细的设备运行状态和监控数据。`;
      document.getElementById('featureModal').style.display = 'flex';
    }
    
    // 关闭功能提示弹窗
    function closeFeatureModal() {
      document.getElementById('featureModal').style.display = 'none';
    }
    
    // 恢复轮播
    function restoreCarousel() {
      // 清除筛选条件
      currentFilter = { type: '', value: '' };
      
      // 恢复轮播并隐藏恢复按钮
      isPaused = false;
      const restoreBtn = document.getElementById('restoreBtn');
      if (restoreBtn) {
        restoreBtn.classList.add('hidden');
      }
      
      // 重新启动轮播
      startCarousel();
      updateRoomData();
      console.log('恢复轮播');
    }
    
    // 返回后台
    function goBack() {
      if (window.parent && window.parent !== window) {
        window.parent.postMessage({ type: 'goBack' }, '*');
      } else {
        window.location.href = 'Large-screen-index.html';
      }
    }
    
    // 页面加载完成后初始化
    window.onload = function() {
      initPage();
    };
    
    // 页面卸载前清理
    window.onbeforeunload = function() {
      if (carouselInterval) {
        clearInterval(carouselInterval);
      }
    };
  </script>
</body>
</html> 